<template >
  <div>
     <h1 style="width: 400px; margin: 0 auto;">猜谜游戏</h1>
     <div class="game_wrap">
         {{gameInfo.mt}}（{{gameInfo.lx}}）
     </div>
     <!-- 提示弹出层部分 -->
     <div class="cover" v-if="coverFlag">
        <div class="close" @click="coverFlag=false">×</div>
         {{gameInfo.ts}} 
     </div>
     <!-- 按钮部分 -->
     <div class="btn_wrap">
        <button @click="coverFlag=true">获取提示</button>
         <button @click="getGame">跳过</button>
     </div>
     <!-- 答案部分 -->
     <div class="answer" v-if="gameInfo.md">
         <input type="text"    v-for="(item,index) in gameInfo.md.length" v-model="answer[index]"  />
     
      </div>
      <div style="width: 400px; margin: 20px auto;">
         <button @click="submitAnswer">提交答案</button>
     </div>
  </div>
</template>
<script setup>
import {ref,reactive} from 'vue'
// 导入获取游戏接口
import {getGameInfo} from '@/api/game'
// 获取游戏信息
let gameInfo=ref({}); //ref 创建数据存储返回的游戏信息
let getGame=async ()=>{
  let res=await getGameInfo();
  console.log(res,"游戏信息")
  gameInfo.value=res;//将获取到的游戏信息存储到gameInfo中
}
getGame();
// 提示弹出层控制
let coverFlag=ref(false)//提示弹出层控制器

// 获取 循环输入框的答案数据
let answer=ref([])
// 提交答案
let submitAnswer=()=>{
   console.log(answer.value)//收集的答案 
  //answer数组 收集的答案 拼接成字符串 和原答案做对比
  if(answer.value.join('')===gameInfo.value.md){
        alert("恭喜你答对了，跳转到下一题")
        getGame()
        answer.value=[]//清空答案 ref收集的值
  }else{
    alert("很遗憾，答错了，请重新作答")
  }
}

</script>
<style lang="scss" scoped>
   .game_wrap{
    width: 400px;
    height: 200px;
    margin: 20px auto;
    background: skyblue;
    font-size: 30px;
    color: #fff;
    border: 2px solid #000;
   }
   .btn_wrap{
       width: 400px;
        height: 100px;
         margin: 20px auto;
         display: flex;
         justify-content: space-between;
   }
   .answer{
       width: 400px;
        display: flex;
            height: 60px;
         justify-content: space-around;
           margin: 20px auto;
      input{
        width: 50px;
        height: 50px;
        border: 2px solid red;
       text-align: center;
      }
   }
   .cover{
    position: absolute;
    width: 300px;
    height: 200px;
    line-height: 200px;
    background: rgba(0,0,0,0.5);
    color: white;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    .close{
      font-size: 40px;
      font-family: "黑体";
      position: absolute;
      right: 10px;
      top: 0;
    }
   }
</style>